<script>
export default {
  name: "My"
}
</script>

<template>
  <div>
      <div class="tabBar">
        <div class="item">
          <img src="../assets/1.png" alt="">
          <p>首页</p>
        </div>
        <div class="item">
          <img src="../assets/2.png" alt="">
          <p>书影音</p>
        </div>
        <div class="item">
          <img src="../assets/3.png" alt="">
          <p>广播</p>
        </div>
        <div class="item">
          <img src="../assets/4.png" alt="">
          <p>小组</p>
        </div>
        <div class="item">
          <img src="../assets/5.png" alt="">
          <p>我的</p>
        </div>
      </div>
  </div>
</template>

<style scoped>
.tabBar{
  border-top: 1px solid #ccc;
  position: fixed;
  bottom: 0;
  width: 100%;
  left:0;
}
.tabBar .item{
  float: left;
  width: 20%;
  text-align: center;
}
.tabBar .item p{
  text-align: center;
  margin-top: 0;
}
</style>